<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org/">

<head>
    <!-- @formatter:off -->
    <!-- Google Tag Manager -->

    <script type="text/javascript" async=""
            src="https://www.googletagmanager.com/gtag/js?id=G-4EVJVBSTB9&amp;l=dataLayer&amp;cx=c"></script>
    <script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-WLNGBXD"></script>
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            window.dataLayer.push(arguments);
        }

        gtag('consent', 'default', {
            ad_storage: 'denied',
            analytics_storage: 'granted',
        });

        (function (w, d, s, l, i) {
            w[l] = w[l] || [];
            w[l].push({
                'gtm.start':
                    new Date().getTime(), event: 'gtm.js'
            });
            var f = d.getElementsByTagName(s)[0],
                j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : '';
            j.async = true;
            j.src =
                'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
            f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', 'GTM-WLNGBXD');

    </script>
    <!-- End Google Tag Manager -->
    <!-- @formatter:on -->

    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <title th:text="${subject}">仿真模拟展示</title>

    <!-- <link rel="stylesheet" type="text/css" href="https://phet.colorado.edu/css/phet-v97-min.css"> -->

    <!-- class edu.colorado.phet.website.content.simulations.BrowseFilterPage -->
    <!-- host phet.colorado.edu -->


    <script src="/static/js/platform.js" async="" defer="" gapi_processed="true"></script>

    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&amp;display=swap" rel="stylesheet">

    <script type="text/javascript">
        function initBreakpoint() {
            var body = document.querySelector('body');
            var menuParents = document.querySelectorAll('#page-nav-menu ul[role=menubar] .nav-menu-parent-text');

            if (body && menuParents) {
                clearInterval(isLargeViewInterval);
                window.phet = window.phet || {};
                window.phet.cssBreakpoint = 40 + // page header container padding
                    220 + // phet and cu logos
                    75 + // search and user menus
                    (body.className.indexOf('rtl') >= 0 ? 30 : 0) + // RTL languages need to break 30 pixels earlier somehow
                    Array.prototype.slice.call(menuParents)
                        .map(function (item) {
                            return item.offsetWidth
                                - parseInt(window.getComputedStyle(item).paddingRight)
                                - parseInt(window.getComputedStyle(item).paddingLeft)
                                + 22; // 22 is horizontal padding + horizontal margin on nav-menu-parent-text in wide view
                        })
                        .reduce(function (accumulator, currentItem) {
                            return accumulator + currentItem;
                        }, 0); // dropdown menu width, flexible due to translations
                const mediaString = '(min-width: ' + window.phet.cssBreakpoint + 'px)';
                window.phet.isLargeView = function () {
                    return window.matchMedia(mediaString).matches;
                };

                document.body.className = document.body.className.replace('pre-load', window.phet.isLargeView() ? 'wide' : 'narrow');
                document.getElementById('page-header-container-wrapper').className = window.phet.isLargeView() ? 'expanded' : 'collapsed';
            }
        }

        var isLargeViewInterval = setInterval(initBreakpoint, 50);
    </script>

    <script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>

    <style type="text/css" id="edu-colorado-phet-website-content-MeteorLoadingBlockerPanel-0">

        .spinner {
            margin-inline: auto;
            padding-block: 40vh;
            width: 70px;
            text-align: center;
        }

        .spinner > div {
            width: 18px;
            height: 18px;
            background-color: #6acef5;

            border-radius: 100%;
            display: inline-block;
            -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
            animation: sk-bouncedelay 1.4s infinite ease-in-out both;
        }

        .spinner .bounce1 {
            -webkit-animation-delay: -0.32s;
            animation-delay: -0.32s;
        }

        .spinner .bounce2 {
            -webkit-animation-delay: -0.16s;
            animation-delay: -0.16s;
        }

        @-webkit-keyframes sk-bouncedelay {

            0%,
            80%,
            100% {
                -webkit-transform: scale(0)
            }

            40% {
                -webkit-transform: scale(1.0)
            }
        }

        @keyframes sk-bouncedelay {

            0%,
            80%,
            100% {
                -webkit-transform: scale(0);
                transform: scale(0);
            }

            40% {
                -webkit-transform: scale(1.0);
                transform: scale(1.0);
            }
        }
    </style>

    <meta property="og:site_name" content="PhET">
    <meta property="twitter:site" content="@PhETsims">
    <meta property="og:title" content="">
    <meta property="twitter:title" content="">
    <meta property="og:url" content="https://phet.colorado.edu/zh_CN/simulations/browse">
    <meta property="twitter:card" content="summary">
    <meta property="og:image" content="https://phet.colorado.edu/images/phet-social-media-logo.png">
    <meta property="twitter:image" content="https://phet.colorado.edu/images/phet-social-media-logo.png">
    <link rel="shortcut icon" href="/static/images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="./css/phet-app29.css" data-rh="true">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" data-rh="true">

    <style></style>
</head>

<body dir="ltr" class="ltr wide show-transitions">
<div id="page-content" role="main">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&amp;display=swap"
          rel="stylesheet">
    <title data-rh="true"></title>
    <meta data-rh="true" name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link data-rh="true" rel="stylesheet" type="text/css" href="/static/css/phet-app29.css">

    <script type="text/javascript">
        history.scrollRestoration = 'manual';
    </script>
    <div id="app" class="react-app">
        <div id="browse-and-filter-page">
            <div id="selected-page">
                <div id="filter-page" class="">
                    <div id="filter-page-right" aria-hidden="false">
                        <div>
                            <ul class="grid sim-collection">
                                <li role="listitem" th:each=" simulator : ${simulatorList}">
                                    <a class="tile grid" th:href="${simulator.getVideoUrl()}" tabindex="-1">
                                        <div class="image-holder">
                                            <img class="thumbnail" width="210" height="140"
                                             th:src="${simulator.getVideoPicture()}" alt=""></div>
                                        <div class="information">
                                            <div class="title-holder" style=" margin: 0 auto; ">
                                                <span class="title" th:text="${simulator.getVideoName()}"></span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script
            type="text/javascript">__meteor_runtime_config__ = JSON.parse(decodeURIComponent("%7B%22meteorRelease%22%3A%22METEOR%402.13.3%22%2C%22gitCommitHash%22%3A%22b2180188e84076010d91ddb647ec15d75beb267f%22%2C%22meteorEnv%22%3A%7B%22NODE_ENV%22%3A%22production%22%2C%22TEST_METADATA%22%3A%22%7B%7D%22%7D%2C%22PUBLIC_SETTINGS%22%3A%7B%22backendMode%22%3A%22PRIMARY%22%2C%22directOrigin%22%3A%22https%3A%2F%2Fphet-direct.colorado.edu%22%2C%22CLEVER_ID%22%3A%22de6371c62cab4cc1ae29%22%7D%2C%22ROOT_URL%22%3A%22https%3A%2F%2Fphet.colorado.edu%2F_m%22%2C%22ROOT_URL_PATH_PREFIX%22%3A%22%2F_m%22%2C%22reactFastRefreshEnabled%22%3Atrue%2C%22autoupdate%22%3A%7B%22versions%22%3A%7B%22web.browser%22%3A%7B%22version%22%3A%226f5fdb298144a9f96cf56dd03158ec306cab3cbb%22%2C%22versionRefreshable%22%3A%222b3304cf3b37200efe070403c3e6820427bcccbc%22%2C%22versionNonRefreshable%22%3A%226f5fdb298144a9f96cf56dd03158ec306cab3cbb%22%2C%22versionReplaceable%22%3A%222b3304cf3b37200efe070403c3e6820427bcccbc%22%7D%2C%22web.browser.legacy%22%3A%7B%22version%22%3A%220d64cc5ec1914568117c3a89855dcb3a841faa01%22%2C%22versionRefreshable%22%3A%222b3304cf3b37200efe070403c3e6820427bcccbc%22%2C%22versionNonRefreshable%22%3A%220d64cc5ec1914568117c3a89855dcb3a841faa01%22%2C%22versionReplaceable%22%3A%222b3304cf3b37200efe070403c3e6820427bcccbc%22%7D%7D%2C%22autoupdateVersion%22%3Anull%2C%22autoupdateVersionRefreshable%22%3Anull%2C%22autoupdateVersionCordova%22%3Anull%2C%22appId%22%3A%221g31nnl1vm0td1ez71tp%22%7D%2C%22appId%22%3A%221g31nnl1vm0td1ez71tp%22%2C%22isModern%22%3Atrue%7D"))</script>

    <script type="text/javascript"
            src="./j/3c9052379e3671a3eb71f49b88881b01313fbc41.js?meteor_js_resource=true"></script>


    <script defer=""
            src="https://static.cloudflareinsights.com/beacon.min.js/v55bfa2fee65d44688e90c00735ed189a1713218998793"
            integrity="sha512-FIKRFRxgD20moAo96hkZQy/5QojZDAbyx0mQ17jEGHCJc/vi0G2HXLtofwD7Q3NmivvP9at5EVgbRqOaOQb+Rg=="
            data-cf-beacon="{&quot;rayId&quot;:&quot;879dec155eb504d6&quot;,&quot;version&quot;:&quot;2024.4.0&quot;,&quot;token&quot;:&quot;57ed97624d4c401fb934c2dd728ace72&quot;}"
            crossorigin="anonymous"></script>


    <div>


    </div>

    <script type="text/javascript">
        var placeholderInterval = setInterval(function () {
            if (typeof $ !== 'undefined') {
                // Listen for existence of a meteor panel
                var reactPanel = $('#app')[0];

                // If the meteor panel exists, hide the loading spinner/blocker
                if (reactPanel && reactPanel.clientHeight > 200) {
                    clearInterval(placeholderInterval);
                    $('.meteor-blocker').remove();
                }
            }
        }, 100);
    </script>


</div>

<script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>

<div class="phet-modal-portal"></div>
<div class="acResults" style="display: none; position: absolute;"></div>
</body>

</html>